<template>


    <a-card title="语音素材列表">

        <a-dropdown slot="extra">
            <a-menu slot="overlay">
                <a-menu-item key="1">
                    <a-icon type="upload"/>
                    <a-upload
                            name="file"
                            :showUploadList="false"
                            :before-upload="beforeUpload"
                            @change="uploadHander"
                            :customRequest="customRequest"
                    >上传新语音
                    </a-upload>
                </a-menu-item>
                <a-menu-divider/>
                <a-menu-item key="2" @click="syncMaterial">
                    <a-icon type="download"/>
                    同步素材库
                </a-menu-item>

            </a-menu>
            <a-button type="danger" style="margin-left: 8px">新增语音素材
                <a-icon type="down"/>
            </a-button>
        </a-dropdown>


        <a-list :grid="{ gutter:16, column: 3 }"
                :loading="ListLoading"
                :pagination="pagination"
                :data-source="dataSource">


            <a-list-item slot="renderItem" slot-scope="item, index">
                <a-card :hoverable="true">
                    <div slot="cover">
                        <aplayer :music="{ title: item.mediaName, src: getMaterialFileUrl(item.mediaId), artist: '语音素材',
                      pic:$exMod.playerBg()
                        }"/>
                    </div>


                    <template slot="actions" class="ant-card-actions">

                        <span @click="downMaterialFile(item.mediaId)"><a-icon type="download"/>下载</span>
                        <span @click="deleteMaterial(item.mediaId)"><a-icon type="delete"/>删除</span>
                    </template>
                </a-card>


            </a-list-item>
        </a-list>


    </a-card>


</template>

<script>
    import {getMaterialFileUrl} from '../../../../../../util/internal.api'
    import {pagination} from '../../../public/colums.js';
    import {
        materialList,
        addFileMaterial,
        deleteMaterial,
        syncMaterialFile
    } from '../../../public/http.js';

    import Aplayer from 'vue-aplayer';


    export default {
        props: ['mediaType'],

        components: {
            aplayer: Aplayer
        },


        data() {
            return {

                upLoading: false,
                ListLoading: false,
                dataSource: [],
                pagination: {

                    ...pagination,
                    pageSize: 12,
                    onChange: current => {
                        this.pagination.current = current;
                        this.getMaterialList();
                    }
                },
                loading: false, //表格loading
                searchData: {mediaType: this.mediaType}


            };
        },
        methods: {


            //同步公众平台内的图片素材
            syncMaterial() {
                this.ListLoading = true;
                syncMaterialFile(this.mediaType).then(res => {
                    this.$exMod.ajaxMessage(res);
                    this.getMaterialList();
                });
                this.ListLoading = false;
            },

            downMaterialFile(mediaId) {
                let url = getMaterialFileUrl(mediaId);
                window.open(url, "_blank");
                return true;

            },

            getMaterialFileUrl,

            //自定义上传方法
            customRequest(data) {
                this.upLoading = true;
                const formData = new FormData();
                formData.append('file', data.file)
                formData.append("mediaType", this.mediaType);
                addFileMaterial(formData).then((res) => {

                    this.$exMod.ajaxMessage(res);
                    if (res.code === 0) {
                        this.getMaterialList();
                    }
                    this.upLoading = false;
                })


            },

            beforeUpload(file) {
                const allowTye = "mp3/wma/wav/amr";
                const fileType = file.type.split("/");
                const chekType = allowTye.split("/").findIndex((value, index, arr) => {
                    return value === fileType[1]
                });
                if (chekType < 0) {

                    this.$notification['error']({
                        message: '语音素材添加失败',
                        description: '语音素材只允许上传' + allowTye + '格式文件'
                    });
                    return false;
                }


                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$notification['error']({message: '语音素材添加失败', description: "语音素材的大小不能超过 2MB!,播放长度不超过60秒"});
                    return false;
                }
                return true
            },

            //山川监听
            uploadHander(info) {

                if (info.file.status === 'done') {
                    this.$message.success(`${info.file.name} file uploaded successfully`);
                } else if (info.file.status === 'error') {
                    this.$message.error(`${info.file.name} file upload failed.`);
                }
            },

            //1.0 获取表格数据
            getMaterialList() {
                this.ListLoading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchData); //删除对象中的空值
                materialList(this.pagination, searchData).then(res => {
                    this.ListLoading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },

            deleteMaterial(mediaId) {

                const _this = this;
                this.$confirm({
                    width: 350,
                    title: `确定要删除这个语音素材吗?`,

                    onOk() {
                        deleteMaterial(mediaId).then(res => {
                            _this.$exMod.ajaxMessage(res);
                            if (res.code === 0) {
                                _this.getMaterialList();
                            }
                        })
                    },
                });


            },


        },
        created() {
            this.getMaterialList();
        }

    }

</script>



